{% block sw_product_image %}
<div
    class="sw-product-image"
    :class="productImageClasses"
>
    <template v-if="!isPlaceholder">
        {% block sw_product_image_preview %}
        <sw-media-preview-v2
            class="sw-product-image__image"
            :source="mediaId"
            :hide-tooltip="false"
        />

        <sw-label
            v-if="showCoverLabel && isCover"
            class="sw-product-image__cover-label"
            variant="primary"
            size="medium"
            appearance="pill"
        >
            {{ $tc('sw-product.mediaForm.coverSubline') }}
        </sw-label>

        {# @experimental stableVersion:v6.8.0 feature:SPATIAL_BASES #}
        {% block sw_product_image_preview_spatial_labels %}
        <sw-label
            v-if="isSpatial"
            class="sw-product-image__spatial-label"
            variant="neutral-reversed"
            size="medium"
            appearance="pill"
        >
            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
            <label
                v-if="isArReady"
                class="sw-label__ar-ready"
            >
                {{ $tc('sw-product.mediaForm.arSubline') }}
            </label>
            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
            <label
                v-else
                class="sw-label__spatial"
            >
                {{ $tc('sw-product.mediaForm.spatialSubline') }}
            </label>
        </sw-label>
        {% endblock %}

        {% endblock %}
        <sw-context-button class="sw-product-image__context-button">
            {% block sw_product_image_context %}
            {% block sw_product_image_context_cover_action %}
            <sw-context-menu-item
                v-if="showCoverLabel && !isCover"
                class="sw-product-image__button-cover"
                @click="$emit('sw-product-image-cover')"
            >
                {{ $tc('global.sw-product-image.context.buttonAsCover') }}
            </sw-context-menu-item>
            {% endblock %}

            {% block sw_product_image_context_delete_action %}
            <sw-context-menu-item
                variant="danger"
                class="sw-product-image__button-delete"
                @click="$emit('sw-product-image-delete')"
            >
                {{ $tc('global.sw-product-image.context.buttonRemove') }}
            </sw-context-menu-item>
            {% endblock %}
            {% endblock %}
        </sw-context-button>
    </template>
    <div
        v-else
        class="is--invalid-drag"
    >
        {% block sw_product_image_placeholder %}
        <mt-icon
            class="sw-product-image__placeholder-icon"
            :name="'regular-image'"
            size="16px"
        />
        {% endblock %}
    </div>
</div>
{% endblock %}
